<template>
    <el-aside width="13%">
        <el-scrollbar >
            <el-menu style="height: 720px;" :default-openeds="['1', '2','3','4','5']" @select="handleSelect">
                <el-sub-menu  index="1" v-if="testProblem?.singleChooseList?.length>0">
                    <template #title>
                        {{$t('enum.single')}}
                    </template>

                    <el-menu-item v-for="(item,index) in testProblem?.singleChooseList" :key="index" :index="String(index)" >
                        <el-text truncated :type="getTextType(index,1)">{{index+1}}、{{item.problemDescribe}}</el-text>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu  index="2" v-if="testProblem?.multipleChooseList?.length>0">
                    <template #title>
                        {{$t('enum.multiple')}}
                    </template>

                    <el-menu-item v-for="(item,index) in testProblem?.multipleChooseList" :key="index" :index="String(index)">
                        <el-text truncated :type="getTextType(index,2)">{{index+1}}、{{item.problemDescribe}}</el-text>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="3" v-if="testProblem?.fillList?.length>0" >
                    <template #title>
                        {{$t('enum.fill')}}
                    </template>

                    <el-menu-item v-for="(item,index) in testProblem?.fillList" :key="index" :index="String(index)"  >
                        <el-text truncated :type="getTextType(index,3)">{{index+1}}、{{item.problemDescribe}}</el-text>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="4" v-if="testProblem?.judgeList?.length>0">
                    <template #title >
                        {{$t('enum.judge')}}
                    </template>

                    <el-menu-item v-for="(item,index) in testProblem?.judgeList" :key="index" :index="String(index)">
                        <el-text truncated :type="getTextType(index,4)">{{index+1}}、{{item.problemDescribe}}</el-text>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="5" v-if="testProblem?.bigList?.length>0">
                    <template #title>
                        {{$t('enum.big')}}
                    </template>

                    <el-menu-item v-for="(item,index) in testProblem?.bigList" :key="index" :index="String(index)">
                        <el-text truncated :type="getTextType(index,5)">{{index+1}}、{{item.problemDescribe}}</el-text>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </el-aside>


    <el-main >
        <div class="container">
            <div class="box" tabindex="0" ref="box" @keydown.up="nextIndex(-1)" @keydown.down="nextIndex(1)">
                <h1>{{$t('problemView.description')}}</h1>
                <div class="problem-describe">{{ chooseProblem?.problemDescribe}}</div>
                <div class="input" v-if="chooseProblem?.type===2 || chooseProblem?.type===5">
                    <h2>{{$t('textView.inputAnswer') }}</h2>
                    <el-input @change="saveInput(chooseProblem.id,false)" v-model="input.inputMap[chooseProblem.id]" style="width: 440px;" :rows="10" type="textarea" placeholder="Please input"/>
                </div>

                <div class="input "  v-else-if="chooseProblem?.type===4">
                    <el-checkbox-group v-model="inputMultiple[chooseProblem.id]"  @change="saveInput(chooseProblem.id,true)">
                        <el-checkbox v-for="(options,index) in chooseProblem?.optionDescribe" :value="String.fromCharCode(index+65)">
                            <b>{{String.fromCharCode(index+65)}} : {{options}}</b>
                        </el-checkbox>
                    </el-checkbox-group>
                </div>

                <div class="input "  v-else-if="chooseProblem?.type===1">
                    <el-radio-group v-model="input.inputMap[chooseProblem.id]"  @change="saveInput(chooseProblem.id,false)">
                        <el-radio v-for="(options,index) in chooseProblem?.optionDescribe" :value="String.fromCharCode(index+65)">
                            <b>{{String.fromCharCode(index+65)}} : {{options}}</b>
                        </el-radio>
                    </el-radio-group>
                </div>


                <div class="input" v-else-if="chooseProblem?.type===3">
                    <el-radio-group v-model="input.inputMap[chooseProblem?.id]" @change="saveInput(chooseProblem.id,false)">
                        <el-radio style="width: 100px;" value="正确" border>正确</el-radio>
                        <el-radio style="width: 100px; margin-top: 10px;" value="错误" border>错误</el-radio>
                    </el-radio-group>
                </div>
                <div style="margin-left: 8%;">
                    <el-button type="primary" @click="nextIndex(-1)">{{$t('textView.toOn')}}(<el-icon><Top /></el-icon>)</el-button>
                    <el-button type="primary" @click="nextIndex(1)">{{$t('textView.toDown')}}(<el-icon><Bottom /></el-icon>)</el-button>
                </div>
            </div>
            <div class="box" v-if="chooseProblem?.problemCode"><pre style="height: 800px;"><code :class="getCodeLanguge(chooseProblem?.codeLanguage)">{{chooseProblem?.problemCode}}</code></pre></div>
        </div>
    </el-main>


</template>


<script setup lang="ts">
    import useEnum from '@/base/useEnum';
    import useTesting from '@/hooks/useTesting'
    import { onMounted,watch,ref} from 'vue';
    const {getCodeLanguge}=useEnum()
    const props=defineProps(['testProblem','testId','submit']);
    const {input,textCache,chooseProblem,testProblem,inputMultiple,getTextType,submitInput,saveInput,nextIndex,handleSelect,switchProblem}=useTesting()

    const box = ref(null);
    onMounted(() => {
      box.value.focus(); // 在组件挂载后自动聚焦到元素上
      input.value.textId=props.testId
      textCache.value.id=props.testId
    });





    watch(()=>props.testProblem,()=>{
        testProblem.value=props.testProblem
        input.value.inputMap=testProblem.value.cache || {}
        for(let multiProblem of testProblem.value.multipleChooseList){
            if(testProblem.value.cache){
                let t=testProblem.value.cache[multiProblem.id]
                if(t && t.length>0){
                    inputMultiple.value[multiProblem.id]=t.split('');
                }
            }

        }
        console.log(props.testId)
        input.value.textId=props.testId
        textCache.value.id=props.testId
        switchProblem()
    })

    watch(()=>props.testId,()=>{
        input.value.textId=props.testId
        textCache.value.id=props.testId
    })

    watch(()=>props.submit,()=>{
        submitInput()
    })
</script>


<style scoped>

    .box:focus {
    outline: none; /* 移除默认的焦点边框 */
    box-shadow: none; /* 移除可能的阴影效果 */
    }

    .problem-describe{
        max-height: 200px;
    }

    .input{
        margin-top: 30px;
        height: 350px;
    }

    .box {
        flex: 1; /* 或者使用具体的宽度，如 width: 50%; */
        box-sizing: border-box;
    }

    .container {
        display: flex;
    }


    pre[class*="language-"] {    
        height: 500px;  
        overflow-y: auto;  

    }
    :deep(.el-radio-group) {
        display: block;
    }
        
    :deep(.el-radio) {
        display: block;
    }
</style>